<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全国薪资列表')"/>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/echarts2.min.js}"></script>
    <title>职位测试页面</title>
</head>
<body style="background-color:#f3f3f4 ">

<div class="container" style="width: 97%;margin-top: 10px">
    <div class="row">
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%">
            <div style="height: 50px;font-size: 20px;line-height: 60px;">职位类型</div>
            <hr style="margin: 0px">
            <div id="position_one" style="height: 550px;margin:10px"></div>
        </div>
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%" >
            <div style="height: 50px;font-size: 20px;line-height: 60px;">语言类型</div>
            <hr style="margin: 0px">
            <div id="position_two" style="height: 550px;margin:10px"></div>

        </div>
    </div>
</div>
<script>

    var chartDom1 = document.getElementById('position_one');
    var myChart1 = echarts.init(chartDom1);


    var option;

    option = {
        title: {
            text: 'Funnel'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        },
        legend: {
            data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
        },
        series: [
            {
                name: 'Expected',
                type: 'funnel',
                left: '10%',
                width: '80%',
                label: {
                    formatter: '{b}Expected'
                },
                labelLine: {
                    show: false
                },
                itemStyle: {
                    opacity: 0.7
                },
                emphasis: {
                    label: {
                        position: 'inside',
                        formatter: '{b}Expected: {c}%'
                    }
                },
                data: [
                    { value: 60, name: 'Visit' },
                    { value: 40, name: 'Inquiry' },
                    { value: 20, name: 'Order' },
                    { value: 80, name: 'Click' },
                    { value: 100, name: 'Show' }
                ]
            },
            {
                name: 'Actual',
                type: 'funnel',
                left: '10%',
                width: '80%',
                maxSize: '80%',
                label: {
                    position: 'inside',
                    formatter: '{c}%',
                    color: '#fff'
                },
                itemStyle: {
                    opacity: 0.5,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                emphasis: {
                    label: {
                        position: 'inside',
                        formatter: '{b}Actual: {c}%'
                    }
                },
                data: [
                    { value: 30, name: 'Visit' },
                    { value: 10, name: 'Inquiry' },
                    { value: 5, name: 'Order' },
                    { value: 50, name: 'Click' },
                    { value: 80, name: 'Show' }
                ],
                // Ensure outer shape will not be over inner shape when hover.
                z: 100
            }
        ]
    };

    option && myChart1.setOption(option);

    var chartDom2 = document.getElementById('position_two');
    var myChart2 = echarts.init(chartDom2);


    var option;

    option = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 1048, name: 'Java' },
                    { value: 735, name: 'Python' },
                    { value: 580, name: 'Javascript' },
                    { value: 484, name: 'C++' },
                    { value: 300, name: 'C#' }
                ]
            }
        ]
    };


    option && myChart2.setOption(option);
</script>

</body>
</html>